<title>管理员列表</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>正在整理</cite></a>
    </div>
</div>

<blockquote class="layui-elem-quote quoteBox">
    <form class="layui-form">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" class="layui-input searchVal" placeholder="请输入用户名"/>
            </div>
            <a class="layui-btn search_btn" data-type="reload">搜索</a>
        </div>
        <div class="layui-inline">
            <a class="layui-btn layui-btn-normal addNews_btn">添加管理员</a>
        </div>
        <div class="layui-inline">
            <a class="layui-btn layui-btn-danger layui-btn-normal" id="vip-btn-del">批量删除</a>
        </div>
    </form>
</blockquote>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="userList"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="menu">
    <button class="layui-btn layui-btn-xs layui-bg-cyan" lay-event="view">查看</button>
    <button class="layui-btn layui-btn-xs layui-bg-gray" lay-event="edit">编辑</button>
    <button class="layui-btn layui-btn-xs layui-bg-red" lay-event="del">删除</button>
</script>

<script type="text/javascript">
    layui.use(['layer', 'table', 'admin'], function () {
        var $ = layui.$
            , layer = layui.layer
            , table = layui.table
            , admin = layui.admin
            , element = layui.element
            , router = layui.router();

        // 表格
        table.render({
            elem: '#userList'
            , id: 'userList'
            , url: '/api/sys/user/list'   //数据接口
            , where: {
                token: layui.data('layuiAdmin').token
            }
            , page: true                         // 开启分页
            , loading: true                      // 开启loading
            , cellMinWidth: 80                   // 每列最小宽度
            , limits: [15, 30, 50]                 // 每页条数的选择项
            , limit: 15                          // 默认每页条数
            , cols: [[                           //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'userId', title: 'ID', sort: true}
                , {field: 'username', title: '用户名'}
                , {field: 'email', title: '邮箱'}
                , {field: 'mobile', title: '电话'}
                , {
                    field: 'status', title: '状态', templet: function (d) {
                        return d.status == 1 ? "已启用" : "禁用";
                    }
                }
                , {title: '操作', fixed: 'right', templet: '#menu'}
            ]]

        });

        $(".search_btn").on("click", function () {
            if ($(".searchVal").val() != '') {
                table.reload("userList", {
                    page: {
                        curr: 1
                    },
                    where: {
                        username: $(".searchVal").val()
                    }
                })
            } else {
                table.reload("userList", {
                    page: {
                        curr: 1
                    }
                })
            }
        });

        // 监听多选删除按钮
        $('#vip-btn-del').on('click', function () {
            var checkStatus = table.checkStatus('userList'); // userList 即为基础参数id对应的值

            if (!checkStatus.data.length) {
                layer.msg('未选中数据');
                return false;
            }

            console.log(checkStatus.data);        //获取选中行的数据
            console.log(checkStatus.data.length); //获取选中行数量，可作为是否有选中行的条件
            console.log(checkStatus.isAll);      //表格是否全选
        });


        //监听工具条
        table.on('tool(table)', function (obj) {
            var data = obj.data;            //获得当前行数据
            var layEvent = obj.event;       //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr;                //获得当前行 tr 的DOM对象

            if (layEvent === 'view') { // 查看

                layer.msg('您点击了查看');
                // do somehing

            } else if (layEvent === 'edit') { // 编辑

                layer.msg('您点击了编辑');
                // do somehing

            } else if (layEvent === 'del') { //删除

                layer.confirm('真的删除行么', function (index) {
                    obj.del(); // 删除对应行（tr）的DOM结构
                    layer.close(index);
                    // do somehing
                });

            }
        });
    });
</script>
